<template>
  <div id="index">
    <top @btn0="db0" @btn1="db1" @btn2="db2" @btn3="db3" ref="btns"></top>
    <div id="sub">
      <div id='view' class="tab" ref="tab0" v-if="viewshow">   
        <bar :name="'trueTimeDashboard'" 
        class="a" 
        ref="db0" 
        :class="{height45:db2show}"
        @picked="trueTimeOnOff"
        @noData="unActive"
        :sendMaxDate="maxDate"
        ></bar>
        <bar :name="'compare'" 
        class="b" 
        v-if="db1if" 
        v-show="db1show" 
        :class="{height45:db2show}"
        ref="db1"
        :sendMaxDate="maxDate"
        ></bar>
        <lineT :name="'lineT'" 
        class="c" 
        v-if="db2if" 
        v-show="db2show" 
        ref='db2'
        :sendMaxDate="maxDate"
        ></lineT>  
      </div>
         <!-- lisa -->
      <div id="view1" class="tab" ref="tab1"  v-if="db3if" 
        v-show="db3show">    
         <lineT :name="'lineT'" 
        class="c" 
        ref='db3'
        :sendMaxDate="maxDate"
        ></lineT>   
      </div>
      <!-- lisa -->
    </div>
   
  </div>
</template>
<script>
import top from './header';
import dashboardBar from './dashboardBar';
import dashboardLine from './dashboardLine';
export default {
  data() {
    return {
      msg: 18,  
      db0if: true,
      db1if: false,
      db2if: false,
      db3if: false,
      viewshow:true,
      db0Active: true,
      db1show: false,
      db2show: false,
      db3show: false,
      maxDate:null
    }
  },
  components: {
    top: top,
    bar: dashboardBar,
    lineT: dashboardLine,
  },
  mounted:function(){
    var _this = this;
    window.onresize=function(){
       if(_this.$refs.db0)_this.$refs.db0.resize()
       if(_this.$refs.db1)_this.$refs.db1.resize()
       if(_this.$refs.db2)_this.$refs.db2.resize()
       if(_this.$refs.db3)_this.$refs.db3.resize()
    }
    this.$http.jsonp("http://192.168.100.139:8787/time/"+"2017-08-02",{emulateJSON:true},{
      header:{},
    }).then(function(response){
      this.maxDate = "2017-08-31"
    })
  },
  methods: {
    db0(msg) {
      this.db0Active = msg  
      this.db3show = false
      if(this.db0Active){
        this.$refs.db0.loop();
      }
    },
    unActive(msg){
      this.$refs.btns.choosen[0].show=msg;
    },
    db1(msg) {
      if(!this.db1if)
      this.viewshow=msg     
      this.db1if = msg;
      this.db1show = msg;
      this.db3if = false
      setTimeout(()=>this.$refs.db0.resize(),10)
       if(this.$refs.db1)
      setTimeout(()=>this.$refs.db1.resize(),10)
    },
    db2(msg) {
      if(!this.db2if)
      this.viewshow=msg   
      this.db2if = msg;
      this.db2show = msg
      this.db3if = false
      setTimeout(()=>this.$refs.db0.resize(),10) //不设置延迟不能触发.
      if(this.$refs.db1)
      setTimeout(()=>this.$refs.db1.resize(),10)
    },
    db3(msg) {
      this.viewshow=this.db3if  
      if(!this.db3if)
      this.db3if = msg
      this.db3show = msg
    },
    trueTimeOnOff(msg){
      if(msg){
        this.$refs.btns.unActive()
      }
    }
  }//methods
}
</script>
<style scoped>
#index {
  width: 90%;
  height: calc(100% - 20px - 80px);
  min-width: 500px;
  padding: 80px 10px 20px;
  border-radius: 5px;
  margin: -76px auto 0;
  position: relative;
}

#view {
  width: 100%;
  height: 80%;
  display: flex;
  flex-flow: wrap;
  justify-content: space-around;
  
}
.tab{
  position:absolute;
}
#view1{
  
  width: 100%;
  height: 80%;
  display: flex;
  background: #f2f2f2;
  opacity:1;
  
 
}
.a {
  width: 100%;
 
  min-width: 45%;
  flex: 1 1 0;
  margin: 20px 2%;
}

.b {
  width: 100%;
  min-width: 45%;
  flex: 1 1 0;
  margin: 20px 2%;
}

.c {
  width: 96%
}
.height45{
 height: 45%;
}
.width45{
  width: 45%
}
</style>
